<template>
  <div id="main">
    <!-- 玄幻小说页面 -->
    <div id="content">
      <!-- 头部limit6 -->
      <div id="hotcontent">
        <div class="ll">
          <div
            class="item"
            v-for="result in fiction_sixdata"
            :key="result.id"
          >
            <div class="image">
              <a href="javascript:;" @click="showdetailJump(item.book_id)">
                <img
                  :src="result.image_urls"
                  alt="result.book_name"
                  width="120"
                  height="150"
                />
              </a>
            </div>
            <dl>
              <dt>
                <span>{{ result.book_author }}</span>
                <a
                  href="javascript:;"
                  @click="showdetailJump(result.book_id)"
                  >{{ result.book_name }}</a
                >
              </dt>
              <dd>{{ result.book_desc }}</dd>
            </dl>
            <div class="clear"></div>
          </div>
        </div>
      </div>

      <div class="dahengfu"></div>

      <!-- 分类小说最近更新列表 -->
      <div id="newscontents">
        <!-- 左边最近更新 -->
        <div class="l">
          <h2>好看的{{ cates }}小说最近更新列表</h2>
          <ul id="lul">
            <li v-for="item in fictions_list" :key="item.id">
              <span class="s2">
                <a href="javascript:;" @click="showdetailJump(item.book_id)"
                  >《{{ item.book_name }}》</a
                >
              </span>
              <span class="s3">
                <a href="javascript:;" @click="JumpChapterRoute(item.book_id,item.book_newest_url)">{{
                  item.book_newest_name
                }}</a>
                <em>({{ item.dtime }})</em>
              </span>
              <span class="s5">{{ item.book_author }}</span>
            </li>
          </ul>
          <!-- 分页区域 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <!-- 好看的分类小说 -->
        <div class="r">
          <h2>好看的{{ cates }}小说</h2>
          <ul>
            <li v-for="item in goodlooklist" :key="item.id">
              <span class="s2">
                <a href="javascript:;" @click="showdetailJump(item.book_id)">{{
                  item.book_name
                }}</a>
              </span>
              <span class="s5">{{ item.book_author }}</span>
            </li>
          </ul>
          <div class="page_b page_b2">喜欢就收藏我们</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '../../assets/css/fantasy.css'
export default {
  data() {
    return {
      fiction_cate: {
        xuanhuan: '玄幻',
        xiuzhen: '修真',
        dushi: '都市',
        lishi: '历史',
        wangyou: '网游',
        kehuan: '科幻',
        yanqing: '言情',
        qita: '其他'
      },
      // 小说分类名称
      cates: '',
      // 分类小说前六本列表数据
      fiction_sixdata: [],

      // 小说数据列表
      fictions_list: [],
      // 查询参数对象
      queryInfo: {
        query: '', //查询参数
        pagenum: 1, // 当前页数
        pagesize: 30 // 每页条数
      },
      // 总数据条数
      total: 0,

      // 好看的分类小说数据列表
      goodlooklist: []
    }
  },
  created() {
    // 获取路由传递过来的 小说分类名字
    this.cates = this.fiction_cate[this.$route.params.name]
    // console.log(this.cates)
    // 将分类小说名称赋值给query查询参数
    this.queryInfo.query = this.cates
    // console.log(this.queryInfo.query)

    // 获取分类小说前六本
    this.getFictionCatelimit()
    // 获取分类小说最近更新数据列表
    this.getFictionCatelist()
    // 获取好看的分类小说
    this.getGoodLooklist()
  },
  methods: {
    // 点击事件，跳转小说详情页
    showdetailJump(book_id) {
      this.$router.push({
        path: '/book/' + book_id
      })
    },
      // 点击事件，跳转小说章节页
      JumpChapterRoute(book_id,sort_id) {
      this.$router.push({
        path: '/chapter/' + book_id + '/' + sort_id
      })
    },
    // 获取分类小说前六本
    async getFictionCatelimit() {
      const { data: res } = await this.$http.get(
        `get_fiction_limitsix/${this.cates}`
      )
      //   console.log(res.data)

      if (res.status !== 200) {
        return this.$message.error('获取分类小说six数据失败！')
      }

      this.fiction_sixdata = res.data
      //   console.log(this.fiction_sixdata)
    },
    // 获取分类小说最近更新数据列表
    async getFictionCatelist() {
      const { data: res } = await this.$http.get('get_fiction_pagination', {
        params: this.queryInfo
      })

      if (res.status !== 200) {
        return this.$message.error('获取分类小说最近更新数据列表失败！')
      }

      this.fictions_list = res.data
      this.total = res.total
      // console.log(this.fictions_list)
    },
    // 监控当前每页条数
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getFictionCatelist()
      this.getGoodLooklist()
    },
    // 监控 每页页码值
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
      this.getFictionCatelist()
    },
    // 获取好看的分类小说
    async getGoodLooklist() {
      const { data: res } = await this.$http.get('get_good_look_ficiton', {
        params: {
          query: this.queryInfo.query,
          pagesize: this.queryInfo.pagesize
        }
      })
      // console.log(res)
      if (res.status !== 200) {
        return this.$message.error('获取好看分类小说数据列表失败！')
      }

      this.goodlooklist = res.data
      // console.log(this.goodlooklist)
    }
  }
}
</script>

<style lang="less" scoped>
#main {
  width: 980px;
  margin: auto;
}
/* ul.el-pager {
  padding: 0px !important;
} */
.el-pagination {
  background-color: #fff;
  border: 1px solid #dddddd;
  margin: 0px 10px;
  margin-bottom: 10px;
}
</style>
